<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>抽奖页面</title>
	<style type="text/css">
		body,
		div {
			font-size: 14px;
			margin: 0px;
			padding: 0px;
		}

		#big {
			width: 1080px;
			height: 400px;
			margin: 0px auto auto auto;
		}

		#cj {
			text-align: center;
			height: 40px;
			line-height: 40px;
		}

		#lblResult {
			color: #F00;
			font-weight: bold;
			font-size: 16px;
		}
	</style>
</head>

<body>
	<div id="cj">
		<input id="btn1" type="button" value="开始抽奖" onclick="CJ();">
		<input type="button" value="重新开始" onclick="window.location.reload();">
		<span id="lblResult"></span>
	</div>
	<div id="big">
	</div>
	<script language="javascript">
		var arr = ["涂康", "孙乾", "岳帅", "何康", "喻浩然", "袁野", "徐子成", "吴旭光", "汤小波", "黄思婷", "吴志博", "耿月", "柯善茂", "钱新辉", "杨造林", "杨书铭", "余浩楠", "张江宇", "姜凯译",  "赵帅", "杨康", "熊雨", "夏熙贵", "王文锦", "胡五凤", "江昊", "杜江", "杜浩", "甘子庚", "李兆鹏", "朱超", "赵子云", "赵宁", "江兰", "张子豪", "王佳欣", "王家恒", "林洁梅", "成梓", "向旺", "李敏", "彭宇豪", "梅镒丰", "李小辉", "谢为韩", "刘志高", "周淼", "程艺清", "罗长森", "蔡光伟", "李斯达", "严志豪", "刘江", "彭少怡", "严思航", "王雄", "李昱晨","李航", "李静", "吴小雪", "杜振", "周海松", "刘忆", "李琦", "缪焱鑫", "田朦", "黄琴韵","管友仁","修俊朝", "张怡", "许方根", "李迎龙", "张锐", "陈子扬", "胡玲康", "朱文春", "李思琪"];

		for (var i = 1; i <= arr.length; i++) {
			var obj = document.createElement("div");
			obj.id = "myDiv" + i;
			Object.assign(obj.style, { border: "2px solid #F39", width: "130px" ,height:"65px",lineHeight:"70px",float:"left",textAlign:"center"});
			obj.innerHTML = arr[i - 1];
			document.getElementById("big").appendChild(obj);
		}


		var INow = Math.ceil(Math.random() * arr.length);             //定义开始位置在1到37之间取随机数，及当前的div位置
		var IAgo;
		var ISum = Math.ceil(Math.random() * 37) + 70;          //定义71到110之间的随机数规定抽奖的次数
		var ISumEnd = Math.ceil(Math.random() * 10) + 3;        //定义抽奖慢慢移动的次数
		var ICount = 1;                                     //定义当前抽奖摇奖次数
		var interval;


		function cjStart() {
			var objNow = document.getElementById("myDiv" + INow);   //获得当前div并设置
			objNow.style.backgroundColor = "#F6C";
			if (INow == 1)
				IAgo = arr.length;
			else
				IAgo = INow - 1;

			var objAgo = document.getElementById("myDiv" + IAgo);    //获取上一个div并设置
			objAgo.style.backgroundColor = "#fff";
			if (INow == arr.length)
				INow = 0;


			if (ICount >= ISum)                                   //循环次数如果到了直接清除定时器
			{
				clearInterval(interval);
				interval = setInterval(cjEnd, 500);
			}
			INow++;
			ICount++;
		}

		function cjEnd() {
			var objNow = document.getElementById("myDiv" + INow);   //获得当前div并设置
			objNow.style.backgroundColor = "#F6C";
			if (INow == 1)
				IAgo = arr.length;
			else
				IAgo = INow - 1;

			var objAgo = document.getElementById("myDiv" + IAgo);    //获取上一个div并设置
			objAgo.style.backgroundColor = "#fff";
			if (INow == arr.length)
				INow = 0;


			if (ICount >= ISum + ISumEnd) {
				clearInterval(interval);
				//document.getElementById("btn1").disabled = 'true';
				var objResult = document.getElementById("lblResult");
				var obj = document.getElementById("myDiv" + INow);
				objResult.innerHTML = obj.innerHTML + ",恭喜您，中奖了!"
			}

			INow++;
			ICount++;
		}

		function CJ() {
			interval = setInterval(cjStart, 50);
		}

	</script>
</body>

</html>